<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="margin-top: 20px;">
    <div class="search_block">
        搜索：
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_code" name="s_code"  placeholder="按产品编号" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_sampleName" name="s_sampleName"  placeholder="按产品名" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" id="search_btn" data-type="search">搜索</button>
                <label class="tip">${stateMsg}</label>
            </div>
        </div>
        <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">添加新产品</button>
    </div>

    <table class="layui-hide" id="samples_table" lay-filter="samples_table"></table>

    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="show">查看样品图片</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑信息</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="${pageContext.request.contextPath}/static/wangeditor/release/wangEditor.min.js"></script>
    <script>
        layui.use(['table','layer','form','upload'],function () {
            var table=layui.table,
                layer=layui.layer,
                form=layui.form,
                $=layui.jquery;

            table.render({
                elem: '#samples_table'
                ,even:true
                ,url:'/back/sample/load'
                ,cols: [[
                    {field:'code', width:120, title: '产品号' ,sort: true}
                    ,{field:'sampleName',width:120,title:'产品名',sort:true}
                    ,{field:'guige',width:120,title:'规格'}
                    ,{field:'cost', width:100,title:'成本价',sort:true}
                    ,{field:'excprice',width:100, title: '出厂价',sort:true}
                    ,{field:'type',width:100,title:'产品类别',sort:true,templet:'#typeTpl'}
                    ,{field:'detail', title: '详细介绍'}
                    ,{fixed: 'right',title:'操作', align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });


            //操作栏模块
            table.on('tool(samples_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;

                if(event=='del'){
                    layer.confirm('要删除这个产品?', function(index){
                        $.post("${pageContext.request.contextPath}/back/sample/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        })
                    });
                }
                if(event=='edit'){
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#sample_form')
                        ,success: function(layero, index){
                            $('#sample_form').attr('action','${pageContext.request.contextPath}/back/sample/modifyInfo');
                            $('#id').val(data.id);
                            $('#code').val(data.code);
                            $('#sampleName').val(data.sampleName);
                            $('#guige').val(data.guige);
                            $('#cost').val(data.cost);
                            $("#excprice").val(data.excprice);
                            $('#type').find("option[value = '"+data.type.id+"']").prop("selected","selected");
                            $('#detail').text(data.detail);
                            $('#btn').text("提交修改");
                            form.render();
                        }
                    });
                }
                if(event=='show'){
                    $.post("/back/sample/loadImages",{id:data.id},function (result) {
                        var images=eval('('+result+')');
                        // alert(images[1].imagePath);
                        // alert(images.length);
                        layer.open({
                            title:'样品图片查看页面'
                            ,type: 1
                            ,skin: 'layui-layer-lan'
                            ,area: ['800px','600px']
                            ,maxmin: true
                            , content: $('#image_show')
                            ,success:function () {
                                var E=window.wangEditor;
                                var editor=new E('#tool','#editor');
                                editor.customConfig.showLinkImg = false;
                                editor.customConfig.uploadFileName = 'images';
                                editor.customConfig.uploadImgParams={
                                    sampleId:data.id
                                };
                                editor.customConfig.uploadImgServer = '/back/sample/upload';
                                editor.customConfig.menus = [
                                    'image',  // 插入图片
                                    'undo',  // 撤销
                                    'redo'  // 重复
                                ];
                                editor.create();
                                editor.txt.html("");
                                for(var i=0;i<images.length;i++) {
                                    // alert(images[i].imagePath);
                                    editor.txt.append("<img src="+"'" +images[i].imagePath+"'" +"/><br/><br/>");
                                }
                            }
                            ,cancel:function(index, layero){
                                    location.reload();
                            }
                        });

                    });
                }
            });

            //搜索添加模块
            var $ = layui.$, active = {
                search: function(){
                    var s_code = $('#s_code').val();
                    var s_sampleName=$('#s_sampleName').val();
                    table.reload('id', {
                        where: {
                            s_code:s_code,
                            s_sampleName:s_sampleName
                        }
                        ,page: {
                            curr:1
                        }

                    });
                }
                ,add:function () {
                    layer.open({
                        title:'添加新产品'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#sample_form')
                        ,success: function(layero, index){
                            $('#sample_form').attr('action','${pageContext.request.contextPath}/back/sample/add');
                            $('#id').val("");
                            $('#code').val("");
                            $('#sampleName').val("");
                            $('#guige').val("");
                            $('#cost').val("");
                            $("#excprice").val("");
                            $('#detail').text("");
                            $('#btn').text("提交添加");
                            form.render();
                        }
                    })
                }
            };

            $('#search_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });



        function formatType(type) {
            return type.sampleType;
        }
    </script>

    <script type="text/html" id="typeTpl">
        {{formatType(d.type)}}
    </script>
</div>

<form id="sample_form" style="display: none" class="layui-form" action="#" method="post">
    <input type="hidden" id="id" name="id"/>
    <div class="info_form_body">
        <div class="layui-form-item">
            <label class="layui-form-label">产品号:</label>
            <div class="layui-input-block">
                <input id="code" type="text" name="code"  lay-verify="required" placeholder="产品号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">产品名称:</label>
            <div class="layui-input-block">
                <input id="sampleName" type="text" name="sampleName"  lay-verify="required" placeholder="产品名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">包装规格:</label>
            <div class="layui-input-block">
                <input id="guige" type="text" name="guige"  lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">成本价:</label>
            <div class="layui-input-block">
                <input id="cost" type="text" name="cost"  lay-verify="required|number" placeholder="成本价" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出厂价:</label>
            <div class="layui-input-block">
                <input id="excprice" type="excprice" name="excprice"  lay-verify="required|number" placeholder="出厂价" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">产品类型:</label>
            <div class="layui-input-block">
                <select id="type" name="type.id">
                    <c:forEach var="type" items="${types}">
                        <option value="${type.id}">${type.sampleType}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详细介绍:</label>
            <div class="layui-input-block">
                <textarea id="detail" name="detail" placeholder="详细介绍" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
            </div>
        </div>
    </div>
</form>

<div id="image_show" style="display: none">
    <div id="tool" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: black">请在下面操作样品图片(不要输入文字，不负责存储，非常抱歉，传图片时候需要非常注意，因为删除图片我还没写，一旦上传，需要删除的话请跟我联系)<hr/></div>
    <div id="editor" class="text">
    </div>
</div>
